<template>
<div style="width: 100%">
  <!--点击新增步骤的全部操作-->
  <div class="button-container">
    <span>当前为：{{parentLabel}}>>{{ChildrenLabel}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button type="info" :disabled="isButtonDisabled" plain size="mini" @click="centerDialogVisible = true">添加步骤</el-button>
    <el-button type="info" plain size="mini" @click="editUseOrder">编辑步骤</el-button>
    <el-button type="info" plain size="mini" @click="AddFile">新增文件</el-button>

  </div>
  <!---------------------->
  <!--主页面显示的列表全部操作-->
  <div>

    <el-table
        :data="tableData"
        style="width: 100%"
        border height="57vh"
        @row-click="rowClick">
      <el-table-column
          :label="List1"
          width="70px"
          style="text-align: center">
        <template v-slot:default="scope">
          <!-- scope.rowIndex 是 Element UI 提供的当前行的索引 -->
          {{stepShow}}{{scope.$index + 1 }} <!-- 序号从 1 开始 -->
        </template>
      </el-table-column>
      <el-table-column
          :prop="illustrateSelect"
          :label="List2">
      </el-table-column>
      <el-table-column
          :label="List3"
          width="55px">
        <!--点击每一行中的"编辑"按钮以后出现的弹框-->
        <template v-slot:default="scope">
          <el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
          <br>
          <el-link type="primary" @click="handleDelete(scope.row)">删除</el-link>
        </template>
        <!--点击每一行中的"删除"按钮以后出现的弹框-->

      </el-table-column>
    </el-table>

    <!---------------------->
    <!--用在返工返修作业指导书中点击“操作”中的“编辑”按钮时，弹出的Dialog-->
    <el-dialog
        title="提示"
        :visible.sync="editDialogVisible"
        width="70%"
        center>
      <span style="font-size: 18px">现在修改的是:【{{tableDataTemp.step}}】</span>
      <!--修改操作说明-->
      <br><br>
      <div class="inputD">
        <span>请输入步骤内容：</span><br><br>
        <span>中文内容：</span><br><br>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="请输入内容"
            v-model="tableDataTemp.illustrate">
        </el-input>
        <br><br><span>English content：</span><br><br>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="请输入内容"
            v-model="tableDataTemp.illustrateEnglish">
        </el-input>
        <br><br><span>Русский язык：</span><br><br>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="请输入内容"
            v-model="tableDataTemp.illustrateRussian">
        </el-input>
      </div>
      <br>
      <!--上传照片功能-->
      <div class="UploadS">
        <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="saveFile"
            :file-list="fileList">

          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>


      <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editDialogConf">确 定</el-button>
      </span>
    </el-dialog>

    <!--点击返工返修作业指导书上方的"添加步骤"弹出的对话框-->
    <el-dialog
        title="添加返修步骤"
        :visible.sync="centerDialogVisible"
        width="70%"
        center>
      <!--添加步骤的板块-->
      <div>
        <span>请按提示填入内容，点击确定保存</span><br><br>
        <!--选择插入的步骤，可以选择现有步骤，也可新加入步骤-->
        <span>当前编辑的文件为：{{parentLabel}}>>{{ChildrenLabel}}</span> <br><br>
        <span>添加的步骤为：步骤{{tableData.length+1}}</span>
        <br><br><span>请输入步骤内容：</span><br><br>
        <!--接收用户输入的中文新增步骤的中文内容-->
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="请输入内容"
            v-model="stepsValue">
        </el-input>

        <!--接收用户输入的中文新增步骤的英文内容-->
        <br><br><span>Please enter the content：</span><br><br>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="Please enter the content"
            v-model="stepsValueEnglish">
        </el-input>

        <!--接收用户输入的中文新增步骤的俄文内容-->
        <br><br><span>Введите содержимое：</span><br><br>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8}"
            placeholder="Введите содержимое"
            v-model="stepsValueRussian">
        </el-input>
        <!---->
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary"
               @click="addStep"
               v-if="parentLabel!==undefined&&ChildrenLabel!=='no'&&tableData.length>0">确 定</el-button>
  </span>
    </el-dialog>

    <!--点击返工返修作业指导书上方的“编辑步骤”弹出的对话框-->
    <el-dialog
        title='编辑返修步骤顺序'
        :visible.sync="centerDialogVisibleEdit"
        width="70%"
        center>
      <!--编辑返修步骤顺序板块-->
      <div>
        <el-table
            :data="tableData"
            style="width: 100%"
            border height="57vh"
            @row-click="rowClick">
          <el-table-column
              :label="List1"
              width="70px"
              style="text-align: center">
            <template v-slot:default="scope">
              <!-- scope.rowIndex 是 Element UI 提供的当前行的索引 -->
              {{stepShow}}{{scope.$index + 1 }} <!-- 序号从 1 开始 -->
            </template>
          </el-table-column>
          <el-table-column
              :prop="illustrateSelect"
              :label="List2">
          </el-table-column>
          <el-table-column
              :label="List3"
              width="55px">
            <!--点击每一行中的箭头，实现上下移动-->
            <template v-slot:default="scope">
              <el-link type="primary" @click="editUseOrderUp(scope)" style="display: flex; justify-content: center"><i class="el-icon-arrow-up"></i></el-link>
              <br>
              <el-link type="primary" @click="editUseOrderDown(scope)" style="display: flex; justify-content: center"><i class="el-icon-arrow-down"></i></el-link>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisibleEdit = false">取 消</el-button>
    <el-button type="primary"
               @click="editUseOrderOk">确 定</el-button>
  </span>
    </el-dialog>

    <!--点击返工返修作业指导书上方的“新增文件”弹出的对话框-->
    <el-dialog
        title='新增返工返修指导书'
        :visible.sync="centerDialogVisibleAddFile"
        width="25%"
        center>
      <!--这里实现页面展示-->
      <div>
        <span>请选择车间：</span><br>
        <el-select v-model="workshopValue" placeholder="请选择" style="width: 100%">
          <el-option
              v-for="item in workshopItem"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <!--新加车间的时候显示-->
        <template v-if="this.workshopValue==='新增车间'">
          <br><br><span>请填入新加车间名称：</span><br><br>
          <el-input v-model="workshopAdd" placeholder="请输入内容" style="width:100%"></el-input>
        </template>

        <!--新加作业指导书的名称-->
        <!--中文部分-->
        <template>
          <br><br><span>请填入新作业指导书中文名称：</span><br>
          <el-input v-model="repairBookAdd" placeholder="请输入内容" style="width:100%"></el-input>
        </template>

        <!--英文部分-->
        <template>
          <br><br><span>Please fill in the English name of the new homework guide：</span><br>
          <el-input v-model="repairBookAddEnglish" placeholder="请输入内容" style="width:100%"></el-input>
        </template>

        <!--俄文部分-->
        <template>
          <br><br><span>Пожалуйста, укажите новое руководство по работе на русском языке：</span><br>
          <el-input v-model="repairBookAddRussian" placeholder="请输入内容" style="width:100%"></el-input>
        </template>

        <!--新加作业指导书的预测步骤-->
        <template>
          <br><br><span>请选择新作业指导书预测步骤数量：</span><br>
          <el-input-number v-model="repairBookNum" @change="repairBookAddNum" :min="1" :max="10" label="描述文字"></el-input-number>
        </template>

      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisibleAddFile = false">取 消</el-button>
    <el-button type="primary"
               @click="addFileOk">确 定</el-button>
  </span>
    </el-dialog>

    <!--用在返工返修作业指导书中点击“操作”中的“删除”按钮时，弹出的Dialog-->
    <el-dialog
        title='删除作业步骤'
        :visible.sync="centerDialogVisibleDelete"
        width="70%"
        center>
      <!--编辑反省步骤顺序板块-->
      <div>
        <div>请注意！删除后无法恢复，包括图片等关联文件也将删除：</div><br><br>
        <div>
          <span>当前删除的步骤为：{{parentLabel}}>>{{ChildrenLabel}}：</span> <br><br>
          <span>{{tableDataTemp.step}}</span>
          <br><br><span>{{tableDataTemp.illustrate}}</span><br><br>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisibleDelete = false">取 消</el-button>
    <el-button type="primary"
               @click="handleDeleteOk">确 定</el-button>
  </span>
    </el-dialog>

  </div>
  <!---------------------->

</div>
</template>

<script>
import axios from "axios";
import {serverUrl} from "@/configUse"
import {filepath} from "@/configUse"
export default {
  name: "UseList",

  data() {
    return {
      List1: '步  骤',
      List2: '操作说明',
      List3: '编辑',
      //加载的时候，接收后端的信息。
      tableData: [
        {
          id: 0,
          useOrder:0,
          //记录中文的操作说明
          illustrate: '',
          //记录英文的操作说明
          illustrateEnglish:'',
          //记录俄文的操作说明
          illustrateRussian:'',
          step: '',
          //记录中文的作业指导书名称
          taksName: '',
          //记录英文的作业指导书名称
          taksNameEnglish:'',
          //记录俄文的作业指导书名称
          taksNameRussian:'',
          //记录修改日期
          UpdateTime: '',
          //记录中文车间名称
          workshop: '',
          //记录俄语的车间名称
          workshopRussian:'',
          //记录英语的车间名称
          workshopEnglish:'',
          fileNameAll:'',
          establishTime:'',
        }
      ],
      //修改数据时，用临时的变量，完全负责tableData
      tableDataTempAll:[],
      //修改数据时候用的临时中转变量，单个对象
      tableDataTemp: {
        id: 0,
        useOrder:0,
        //记录中文的操作说明
        illustrate: '',
        //记录英文的操作说明
        illustrateEnglish:'',
        //记录俄文的操作说明
        illustrateRussian:'',
        step: '',
        //记录中文的作业指导书名称
        taksName: '',
        //记录英文的作业指导书名称
        taksNameEnglish:'',
        //记录俄文的作业指导书名称
        taksNameRussian:'',
        //记录修改日期
        UpdateTime: '',
        //记录中文车间名称
        workshop: '',
        //记录俄语的车间名称
        workshopRussian:'',
        //记录英语的车间名称
        workshopEnglish:'',
        fileNameAll:'',
        establishTime:'',
      },
      //页面选择不同语言，进行转换的列表。
      //记录图片地址数组，用在加载、回显的时候。
      pictureV:[],
      //用在上传照片的时候显示出的原有照片，也是存储上传后的原始照片的文件名的数组
      fileList: [],
      //控制点击“新增步骤”按钮弹窗
      centerDialogVisible: false,
      //控制点击每行中的“编辑”按钮弹窗
      editDialogVisible: false,
      //控制点击“编辑步骤”按钮弹窗
      centerDialogVisibleEdit:false,
      //控制点击每行“操作”中的“删除”按钮弹窗
      centerDialogVisibleDelete:false,
      //控制点击“新增文件”的按钮弹窗
      centerDialogVisibleAddFile:false,
      //记录选择的文件的地址
      dialogImageUrl: '',
      //点击已上传的文件，进行放大显示
      dialogVisible: false,
      disabled: false,

      //用在接收用户写入的《操作说明》、《添加步骤》的修改中文内容；
      stepsValue:'',
      //用在接收用户写入的《操作说明》、《添加步骤》的修改英文内容；
      stepsValueEnglish:'',
      //用在接收用户写入的《操作说明》、《添加步骤》的修改俄文内容；
      stepsValueRussian: '',
      //建立这个变量，是记录上传图片的名称的，如果后期图片有增加、删减，可以比对出来，形成一个新的数字，该数组的内容是要传递到后端，作为后端校验图片是否重复用
      workshopItem: [],
      //用在“新增文件”接收用户选择的车间名称，
      workshopValue: '',
      //如果需要新增车间名称，用这个变量接收
      workshopAdd:'',
      //如果需要新增作业指导书名称，中文名称
      repairBookAdd:'',
      //记录需要新增作业指导书名称，英文名称
      repairBookAddEnglish:'',
      //记录需要新增作业指导书名称，俄文名称
      repairBookAddRussian:'',
      //记录新增文件中的预测步骤的计数器
      repairBookNum:1,
      //用在选择语言后，对操作说明中的内容进行变更
      illustrateSelect:"illustrate",
      //控制上方的《添加步骤》、《修改顺序》、《添加文件》是否可用
      isButtonDisabled:true,

      //用在列表中展示步骤，实现列表自动排序
      stepShow:'步骤',
      stepShowNumb:1,
    }
  },
  props:['ChildrenLabel','parentLabel','TreeList','languageS','TreeListAll','labelIndex'],
  methods: {
    /*公共用的函数放置区*/
    //点击树形导航结构，筛选出列表内容
    repairStepList(){
      //判断是否为当前展示的标签页（当前展示的标签页Index是1）
        //查询步骤列表
        this.$request.post('/repairStepList',{
          workshop:this.parentLabel,
          taksName:this.ChildrenLabel,
          languageS:this.languageS
        }).then(result =>{
          //判断如果token不对，返回到登录页面
          if (result.code ===401){
            this.$router.push('/UserLogin')
          }else {
            this.tableData=result.data;
            //成功之后，把英文的车间名称、作业指导书名称传递出去，给父组件，父组件分配到其他组件中
            this.$emit("nameFormUseList",this.tableData[0].workshopEnglish,this.tableData[0].taksNameEnglish)
          }
        })

    },


    /*单击“操作”列中每一行的《编辑》按钮，弹出的对话框*/
    handleEdit(row) {
      this.editDialogVisible=true
      //把数据交给临时变量进行回显，并且作为修改时的数据发到后台
      this.tableDataTemp.id=row.id
      this.tableDataTemp.step=row.step
      //赋值中文、俄文、英文的操作说明
      this.tableDataTemp.illustrate=row.illustrate
      this.tableDataTemp.illustrateEnglish=row.illustrateEnglish
      this.tableDataTemp.illustrateRussian=row.illustrateRussian
      //赋值中文、俄文、英文的作业指导书名称
      this.tableDataTemp.taksName=row.taksName;
      this.tableDataTemp.taksNameEnglish=row.taksNameEnglish
      this.tableDataTemp.taksNameRussian=row.taksNameRussian
      ////赋值中文、俄文、英文的车间名称
      this.tableDataTemp.workshop=row.workshop
      this.tableDataTemp.workshopEnglish=row.workshopEnglish
      this.tableDataTemp.taksNameRussian=row.workshopRussian
      this.tableDataTemp.UpdateTime=row.UpdateTime
      this.tableDataTemp.fileNameAll=row.fileNameAll

      /**对这一行中的照片进行回显。*/
      //把记录图片数据的数组清空
      this.fileList=[]
      //拿到数据库中存放的图片文件名称信息。
      if (this.tableDataTemp.fileNameAll!==null){
        let pictureV=this.tableDataTemp.fileNameAll.split("|*|");
        if (pictureV.length>0){
          pictureV.pop()
          //把拿到数据库中存放的图片文件名称转换为路径信息
          let temp={}
          for (let i=0;i<pictureV.length;i++){
            temp={
              name:"index"+i.toString(),
              url:filepath+pictureV[i].toString()
            }
            this.fileList.push(temp)
          }
        }
      }
    },
    /*“操作”列中的《编辑》按钮，弹出的对话框，点击“确定”按钮后的函数，为后端进行发送请求，修改数据*/
    editDialogConf() {
      this.editDialogVisible = false;
      //创建一个对象，给后端发送数据
      const formData=new FormData();
      // 发送请求，修改数据，需要修改的数据是两个，一个是操作说明内的内容，一个是上传的图片；
      //记录文件名，存放的是原来有的文件，本次修改没有变化的文件名。
      let fileName="";
      // 遍历用户选择的文件列表
      for (let i = 0; i < this.fileList.length; i++) {
        //判断是否为新加入的文件，如果不是新加入的文件，用fileName记录下来文件名；
        if(this.fileList[i].raw==null){
          let index =this.fileList[i].url.lastIndexOf("\\");
          if(index===-1){
            index=this.fileList[i].url.lastIndexOf("/");
          }
          fileName=fileName+this.fileList[i].url.slice(index+1)+"|*|"
        } else {
          // 将文件添加到FormData中，准备传给后端，如果没有，假如的是一个null
          formData.append('fileListV', this.fileList[i].raw);
        }
      }
      if(formData.getAll('fileListV').length===0){
        //注意，查文件的时候要看这里
        formData.append('fileListV', new Blob(undefined, undefined), 'empty'); ``
      }
      //循环完成后，需要再组合一下formData，把数据合并，修改的”文本数据“，修改的”文件“数据。
      //首选把临时记录和后端对接的数据中的fileNameAll修改掉，这里面可能有需要删除的文件，记录的是和上一次一样的文件名，后端判断是否有需要删除的，是否有新增的，再合并为一个全新的文件名。
      this.tableDataTemp.fileNameAll=fileName;
      //去掉创建日期选项，总是报错
      // eslint-disable-next-line no-unused-vars
      const {establishTime, ...newTableDataTemp} = this.tableDataTemp;
      console.log(newTableDataTemp)
      formData.append("tableDataTemp",JSON.stringify(newTableDataTemp))

      axios({
        method:"put",
        url:serverUrl+"repairModifySteps",
        data:formData,
        headers:{
          'Content-Type': 'multipart/form-data',
          'u_token': localStorage.getItem('u_token'),
        }
      }).then(result=>{
        if (result.code === 401){
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          //因为后端无法正确解析传入的字符串格式，出现乱码，因此对数据进行二次发送
          this.$request.put("/repairModifyStepsString",newTableDataTemp).then(result =>{
            alert("result.data.msg")
            console.log(result)
            //需要回显数据，现在在后端保存到数据库的数据就是要回显到新的页面的，因此后端返回即可
            this.repairStepList();
          })
        }
      }).catch(error => {
        let errorMessage="出错了，请联系管理员！"+error.toString()
        alert(errorMessage)
      });
    },

    /*单击“操作”中每一行的《删除》按钮，弹出对话框*/
    handleDelete(row){
      console.log(row)
      this.centerDialogVisibleDelete=true
      this.tableDataTemp.id=row.id;
      this.tableDataTemp.step=row.step;
      this.tableDataTemp.illustrate=row.illustrate;
      this.tableDataTemp.taksName=row.taksName;
      this.tableDataTemp.UpdateTime=row.UpdateTime;
      this.tableDataTemp.workshop=row.workshop;
      this.tableDataTemp.fileNameAll=row.fileNameAll;
    },

    /*单击“操作”中每一行的《删除按钮》，弹出对话框中的“确定”按钮执行删除动作*/
    handleDeleteOk() {
      //判断是不是当前作业指导书只有最后一条了，如果是，不允许删除
      if(this.tableData.length<=1){
        alert("已经最后一条操作步骤，如果删除，请联系管理者或系统负责人")
      } else {
        //向后端发送请求，发过去的是一个delete请求
        this.$request.delete('/repairDelete', {data: this.tableDataTemp}).then(result => {
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            let msg = result.msg + "(删除成功)"
            alert(msg)
            //回调数据，刷新列表
            this.repairStepList()
            this.centerDialogVisibleDelete = false
            location.reload()
          }
        })
      }

    },

    /*上传文件时候用到的2个函数*/
    //移除图像时的回调函数
    handleRemove(file) {
      let index=this.fileList.findIndex(item => item.uid === file.uid);
      if (index !==-1){
        this.fileList.splice(index,1);
      }
    },
    //点击文件列表中已上传的文件时，弹窗，显示图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    //在这里获得用户添加的文件，当用户的文件选择改变的时候。
    saveFile(file, fileList){
      this.fileList=fileList;
    },

    //在“步骤表”上单击鼠标的时候触发
    rowClick(row){
      //把图片数据发给图片显示软件
       this.$bus.$emit('obtainUrl',row.fileNameAll)
    },

    //点击“增加步骤”弹窗里面的“确定”按钮
    addStep(){
      console.log(this.stepsValue,this.stepsValueRussian,this.stepsValueRussian)
      //发送post请求到后端，对数据进行保存
      //需要根据不同的语言，对车间名称、作业指导书名称、操作步骤进行传入。
      // 校验数据，如果有数据不对，将不进行保存
      if (this.stepsValue===''){
        alert("中文操作步骤未填写")
      }else if (this.stepsValueEnglish===''){
        alert("英文的操作步骤未填写")
      }else if (this.stepsValueRussian===''){
        alert("俄文的操作步骤未填写")
      }else {

        this.$request.post("/addStep",{
          useOrder:this.tableData.length+1,
          //中文部分实现
          step:"步骤"+(this.tableData.length+1).toString(),
          //记录中文的操作步骤
          illustrate:this.stepsValue,
          //记录英文的操作步骤
          illustrateEnglish:this.stepsValueEnglish,
          //记录俄文的操作步骤
          illustrateRussian:this.stepsValueRussian,
          //记录中文的车间名称
          workshop:this.tableData[0].workshop,
          //记录俄语的车间名称
          workshopRussian:this.tableData[0].workshopRussian,
          //记录英语的车间名称
          workshopEnglish:this.tableData[0].workshopEnglish,
          //记录中文的作业指导书名称
          taksName:this.tableData[0].taksName,
          //记录英文的作业指导书名称
          taksNameEnglish:this.tableData[0].taksNameEnglish,
          //记录俄文的作业指导书名称
          taksNameRussian:this.tableData[0].taksNameRussian,
        }).then(result =>{
          if (result.code === 401){
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            this.repairStepList();
            this.centerDialogVisible=false
          }
        })

      }
    },

    //点击“增加文件”弹窗的控制逻辑
    AddFile(){
      //初始化车间选择列表
      this.workshopItem=[]
      for (let i = 0; i < this.TreeList.length; i++) {
        this.workshopItem.push({
          value: this.TreeList[i].label,
          label: this.TreeList[i].label,
        })
      }
      this.centerDialogVisibleAddFile=true
      //初始化用到的数据；
      //用在“新增文件”接收用户选择的车间名称，
      this.workshopValue=''
      //如果需要新增车间名称，用这个变量接收
      this.workshopAdd=''
      //如果需要新增作业指导书名称，用这个变量接收,并且初始化赋值
      this.repairBookAdd=''
      //英文初始化赋值
      this.repairBookAddEnglish=''
      //俄文初识化赋值
      this.repairBookAddRussian=''
      //记录新增文件中的预测步骤的计数器,初始化赋值
      this.repairBookNum=1
    },
    //点击“增加文件”中的计数器按钮，产生的改变函数
    repairBookAddNum(){
    },

    //点击“增加文件”弹窗中的"确定"按钮，实现
    addFileOk(){
      //校验数据有效性
      //校验是否输入了车间名称
       if(this.workshopValue===''&&this.workshopAdd===''){
         alert("车间名称未填写")
       }else {
         //校核作业指导书名称是否填写
         if(this.repairBookAdd===''){
           alert("中文的作业指导书名称未填写\nThe name of the Chinese homework guide is not filled in\nНазвание инструкции на китайском языке не заполнено")
         }else if (this.repairBookAddEnglish===''){
           alert("英文的的作业指导书名称未填写\n The name of the English homework guide is not filled in\nНазвание инструкции на английском языке не заполнено")
         }else if(this.repairBookAddRussian===''){
           alert("俄文的作业指导书名称未填写\nThe name of the homework guide in Russian is not filled in\nНазвание инструкции на русском языке не заполнено")
         } else {
           //准备组合数据
           //如果有新增的车间名称，先整合起来
           if (this.workshopAdd!==''){this.workshopValue=this.workshopAdd}

           //初始化所有的车间信息列表
           let workshopItemAll=[]
           for (let i=0;i<this.TreeListAll.length; i++){
             workshopItemAll.push({
               value:this.TreeListAll[i].label,
               label:this.TreeListAll[i].label,
             })
           }
           //确认点击的内容，形成数据
           let temp={
             value:this.workshopValue,
             label:this.workshopValue,
           }
           //查出说点的车间名在全部车间名中的位置
           let index = workshopItemAll.findIndex(obj => {
             return obj.value === temp.value && obj.label === temp.label
           })
           //开始组合用三个语言的车间名称
           //首先清空数据，建立一个新的数组，添加数据初始化
           let  tableDataTemp=[]
           if(index<workshopItemAll.length/3){
              //表明在最上面语言（英语），需要向下填充内容。
             for (let i = 0; i < this.repairBookNum; i++) {
               tableDataTemp.push({
                 //加入通用内容
                 useOrder:i+1,
                 step: "步骤"+(i+1).toString(),
                 //加入英文车间名称、作业指导书名称
                 workshopEnglish: workshopItemAll[index].label,
                 taksNameEnglish: this.repairBookAddEnglish,
                 //加入中文车间名称、作业指导书名称
                 workshop:workshopItemAll[index+workshopItemAll.length/3].label,
                 taksName:this.repairBookAdd,
                 //加入俄文车间名称、作业指导书名称
                 workshopRussian: workshopItemAll[index+workshopItemAll.length/3*2].label,
                 taksNameRussian: this.repairBookAddRussian
               })
             }
           } else if (index<workshopItemAll.length/3*2){
             //表明在中间语言（中文），需要向下填充俄语内容，向上填充英语内外。
             for (let i = 0; i < this.repairBookNum; i++) {
               tableDataTemp.push({
                 //加入通用内容
                 useOrder:i+1,
                 step: "步骤"+(i+1).toString(),
                 //加入英文车间名称、作业指导书名称
                 workshopEnglish: workshopItemAll[index-workshopItemAll.length/3].label,
                 taksNameEnglish: this.repairBookAddEnglish,
                 //加入中文车间名称、作业指导书名称
                 workshop:workshopItemAll[index].label,
                 taksName:this.repairBookAdd,
                 //加入俄文车间名称、作业指导书名称
                 workshopRussian: workshopItemAll[index+workshopItemAll.length/3].label,
                 taksNameRussian: this.repairBookAddRussian
               })
             }
           } else if(index<workshopItemAll.length){
             //表明在最后语言（俄语），需要向上最上面，填充英语内容，向上中间填充中文内容描述。
             for (let i = 0; i < this.repairBookNum; i++) {
               tableDataTemp.push({
                 //加入通用内容
                 useOrder:i+1,
                 step: "步骤"+(i+1).toString(),
                 //加入英文车间名称、作业指导书名称
                 workshopEnglish: workshopItemAll[index-workshopItemAll.length/3*2].label,
                 taksNameEnglish: this.repairBookAddEnglish,
                 //加入中文车间名称、作业指导书名称
                 workshop:workshopItemAll[index-workshopItemAll.length/3].label,
                 taksName:this.repairBookAdd,
                 //加入俄文车间名称、作业指导书名称
                 workshopRussian: workshopItemAll[index].label,
                 taksNameRussian: this.repairBookAddRussian
               })
             }
           }

           //向后端发送请求，进行数据添加,需要完成repairTesting数据表操作、repair_book数据操作
           this.$request.post("/addFile",tableDataTemp).then(result=>{
             if (result.code === 401){
               this.$router.push('UserLogin')
               alert("您未登录，请登录")
             }else if (result.code===402){
               alert("数据库写入错误，请联系管理员")
             }else {
               let msg=result.msg+"添加成功"
                  alert(msg)
               this.centerDialogVisibleAddFile=false
               //重新回显数据
               location.reload();
             }
           })
         }
       }
    },

    //单击按钮“编辑步骤”的函数
    editUseOrder(){
      this.tableDataTempAll=this.tableData
      this.centerDialogVisibleEdit=true
    },
    //点击“编辑步骤”中的向上按钮，数据向上移动。
    editUseOrderUp(scope){
      //将本行的数据上移一位
      //找到当前要操作的行在数据中的索引值
      const index = this.tableDataTempAll.findIndex(item=>item.useOrder===scope.row.useOrder)
      if (index === -1) {
        alert("系统存在故障，请联系管理员")
      } else if (index === 0) {
        alert("当前已经为第一步，已不可再向上移动")
      } else {

        // 使用解构赋值交换两个元素
        [this.tableDataTempAll[index].illustrate, this.tableDataTempAll[index - 1].illustrate] = [this.tableDataTempAll[index - 1].illustrate, this.tableDataTempAll[index].illustrate];
        [this.tableDataTempAll[index].fileNameAll, this.tableDataTempAll[index - 1].fileNameAll] = [this.tableDataTempAll[index - 1].fileNameAll, this.tableDataTempAll[index].fileNameAll];
        [this.tableDataTempAll[index].establishTime, this.tableDataTempAll[index - 1].establishTime] = [this.tableDataTempAll[index - 1].establishTime, this.tableDataTempAll[index].establishTime];
        [this.tableDataTempAll[index].illustrateEnglish, this.tableDataTempAll[index - 1].illustrateEnglish] = [this.tableDataTempAll[index - 1].illustrateEnglish, this.tableDataTempAll[index].illustrateEnglish];
        [this.tableDataTempAll[index].illustrateRussian, this.tableDataTempAll[index - 1].illustrateRussian] = [this.tableDataTempAll[index - 1].illustrateRussian, this.tableDataTempAll[index].illustrateRussian];
      }
    },

    //点击“编辑步骤”中的向下按钮，数据向下移动。
    editUseOrderDown(scope){
      //将本行的数据下移一位
      //找到当前要操作的行在数据中的索引值
      const index = this.tableDataTempAll.findIndex(item=>item.useOrder===scope.row.useOrder)
      if (index === -1) {
        alert("系统存在故障，请联系管理员")
      } else if (index === this.tableDataTempAll.length-1) {
        alert("当前已经为最后一部，已不可再向下移动")
      } else {

        // 使用解构赋值交换两个元素
        [this.tableDataTempAll[index].illustrate, this.tableDataTempAll[index + 1].illustrate] = [this.tableDataTempAll[index + 1].illustrate, this.tableDataTempAll[index].illustrate];
        [this.tableDataTempAll[index].fileNameAll, this.tableDataTempAll[index + 1].fileNameAll] = [this.tableDataTempAll[index + 1].fileNameAll, this.tableDataTempAll[index].fileNameAll];
        [this.tableDataTempAll[index].establishTime, this.tableDataTempAll[index + 1].establishTime] = [this.tableDataTempAll[index + 1].establishTime, this.tableDataTempAll[index].establishTime];
        [this.tableDataTempAll[index].illustrateEnglish, this.tableDataTempAll[index + 1].illustrateEnglish] = [this.tableDataTempAll[index + 1].illustrateEnglish, this.tableDataTempAll[index].illustrateEnglish];
        [this.tableDataTempAll[index].illustrateRussian, this.tableDataTempAll[index + 1].illustrateRussian] = [this.tableDataTempAll[index + 1].illustrateRussian, this.tableDataTempAll[index].illustrateRussian];
      }
    },

    //点击“编辑步骤”中的“确定”按钮，数据向后台进行保存。
    editUseOrderOk(){
      this.$request.put("/editUseOrder",this.tableDataTempAll).then(result=>{
        if (result.code === 401){
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          let msg=result.msg+"修改成功"
          alert(msg)
          this.tableData=this.tableDataTempAll
          this.centerDialogVisibleEdit=false;
        }
      })
    },

    //处理不同语言的选择函数
    languageSelect(){
      if(this.languageS==="chinese"){
        //在返工返修作业指导书列表中的表头部分
        this.List1="步  骤"
        this.List2="操作说明"
        this.List3="编辑"
        this.illustrateSelect="illustrate"
        this.stepShow='步骤'
      } else if (this.languageS==="english"){
        this.List1="Step"
        this.List2="Operating instructions"
        this.List3="Edit"
        this.illustrateSelect="illustrateEnglish"
        this.stepShow='Step'
      } else if (this.languageS==="russian"){
        this.List1="Шаги"
        this.List2="Описание операций"
        this.List3="Сюй"
        this.List3="Сюй"
        this.illustrateSelect="illustrateRussian"
        this.stepShow='Шаги'
      }
    },
  },

  watch:{
    //监控导航栏变化，在点击导航栏时，把导航栏信息发送给父窗口，然后筛选“返工返修”的内容
    ChildrenLabel(){
      if (this.parentLabel!=='' && this.parentLabel!==undefined){
        this.isButtonDisabled=false;
        this.repairStepList()
      }else {
        this.isButtonDisabled=true;
      }
    },
    languageS(){
      this.languageSelect()
    },
  },


  mounted() {

  }
}
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: flex-end;
}
.UploadS{
  border-width: 1px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
}
.inputD{
  border-width: 1px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
}
</style>